<template>
    <!-- <CyButton size="small">
        <template #icon> icon</template>
        这是一个按钮
        <template #loading> loading</template>
    </CyButton> -->
    <div class="main">
        <CyButton size="small" type="text" :plain="true">
            这是一个按钮
        </CyButton>
        <CyButton size="large" type="warning">
            这是一个按钮
        </CyButton>
        <CyButton :disabled="true" ref="testBtn" :loading="true">
            <template #icon>
                <img src="/success.png" width="20" height="20">
            </template>
            这是一个按钮
            <template #loading>
                <img src="https://www.bing.com/th/id/OGC.dda792fe9354f113cfe5da1a3a3e297c?pid=1.7&rurl=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f012d11571d7d0d32f875a399e1fe9e.gif&ehk=RShyDplHWFeu66qAskf9EW7msQL%2bg2lQQ82cyMUNy0E%3d"
                    width="20" height="20">
            </template>
        </CyButton>
    </div>
    <div style="width: 300px;">
        <TextInput v-model="wenben" @input="() => { console.log(wenben) }"></TextInput>
        {{ wenben }}
    </div>
</template>
<script setup>
import CyButton from '../commponents/Button.vue'
import { ref, onMounted } from 'vue'
import TextInput from '../commponents/Textinput.vue'

const testBtn = ref(null)
const wenben = ref('')
console.log(testBtn.value, 24)//相当于在创建后的生命周期 打印不出来 dom还没生成

onMounted(() => {
    console.log(testBtn.value, 27)//挂载后
})
</script>
<style scoped>
.main {
    display: flex;
    gap: 10px
}
</style>